<template>
   <div class="person">
     <h1>中国</h1>
     <h2 ref="title2">北京</h2>
     <h3>某马</h3>
     <button @click="showLog">touch me print h2元素</button>
   </div>
</template>

<script lang="ts" setup name="Person">  //生效需要引入外部插件import VueSetupExtend  from 'vite-plugin-vue-setup-extend'
/**
 * ref 作用用于注册模板引用
 * 用在普通html标签上获取的是DOM节点
 * 用在组件上是获取的组件实例对象
 */
import {defineExpose,watch,ref,watchEffect} from "vue";

//create one存储ref标记内容
let title2=ref()
let a=ref(0)
let b=ref(1)
let c=ref(2)
function showLog(){
  // console.log(document.getElementById('title2'))
  console.log(title2.value)

}
defineExpose({a,b,c})
</script>
<style scoped>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
li{
  font-size: 30px;
}
</style>